import React from 'react';
import Api from 'Utils/api';
import { Button } from 'antd';
import ChartOfFood from './Components/ChartOfFood';
import AddModal from './addModal';
import './index.scss';

const pageSize = 2;
class AlertRulePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      totalCount: 0,
      selectTab: 1,
      list: [],
      listPage: 1,
      chart1data: [],
      chart2data: [],
      title1: '',
      title2: '',
    };
    this.init = ::this.init;
    this.handleReload = ::this.handleReload;
  }
  componentDidMount() {
    this.init();
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/warning/enterprise',
      query: {
        limit: pageSize,
        offset: (this.state.currentPage - 1) * pageSize,
      },
      success: (json) => {
        const chart1data = json.data_list[0] ? [
          {
            item: '抽检监测',
            value: json.data_list[0].product_check,
            obj: json.data_list[0].category,
          },
          {
            item: '行政处罚',
            value: json.data_list[0].justice_case,
            obj: json.data_list[0].category,
          },
          {
            item: '永安通巡查',
            value: json.data_list[0].gps_data,
            obj: json.data_list[0].category,

          },
          {
            item: '移动执法巡查',
            value: json.data_list[0].enter_check,
            obj: json.data_list[0].category,

          },
          {
            item: '阳光厨房',
            value: json.data_list[0].sunny_kitchen,
            obj: json.data_list[0].category,

          },
          {
            item: '公众投诉举报',
            value: json.data_list[0].report,
            obj: json.data_list[0].category,
          },
        ] : [];
        const chart2data = json.data_list[1] ? [
          {
            item: '抽检监测',
            value: json.data_list[1].product_check,
            obj: json.data_list[1].category,
          },
          {
            item: '行政处罚',
            value: json.data_list[1].justice_case,
            obj: json.data_list[1].category,
          },
          {
            item: '永安通巡查',
            value: json.data_list[1].gps_data,
            obj: json.data_list[1].category,

          },
          {
            item: '移动执法巡查',
            value: json.data_list[1].enter_check,
            obj: json.data_list[1].category,

          },
          {
            item: '阳光厨房',
            value: json.data_list[1].sunny_kitchen,
            obj: json.data_list[1].category,

          },
          {
            item: '公众投诉举报',
            value: json.data_list[1].report,
            obj: json.data_list[1].category,
          },
        ] : [];
        this.setState({
          chart1data,
          chart2data,
          title1: json.data_list[0] ? json.data_list[0].category : [],
          title2: json.data_list[1] ? json.data_list[1].category : [],
          totalCount: json.total_count,
          list: json.data_list,
        }, () => {
          console.log(this.state.list);
        });
      }
    });
    api.run();
  }
  handleClick() {
    this.modal.show();
  }
  onListPageChange(page) {
    this.setState({ currentPage: page }, () => {
      this.init();
    });
  }
  handleReload() {
    this.setState({
      currentPage: 1
    }, () => { this.init(); });
  }
  handlePre() {
    const { currentPage } = this.state;
    if (currentPage === 1) {
      return;
    }
    this.setState({
      currentPage: currentPage - 1
    }, () => { this.init(); });
  }
  handleNext() {
    const { currentPage, totalCount } = this.state;
    const PageNum = Math.ceil(totalCount / pageSize);
    if (currentPage === PageNum) {
      return;
    }
    this.setState({
      currentPage: currentPage + 1
    }, () => { this.init(); });
  }
  renderFooter() {
    const { totalCount, currentPage } = this.state;
    const PageNum = Math.ceil(totalCount / pageSize);
    const nodeInfo = [];
    for (let i = 0; i < PageNum; i++) {
      const currentClass = i + 1 === currentPage ? 'active-page' : 'normal-page';
      nodeInfo.push((
        <span key={i} className={currentClass} onClick={this.onListPageChange.bind(this, i + 1)} />
      ));
    }
    return nodeInfo;
  }
  render() {
    const { chart1data, chart2data, totalCount, title1, title2 } = this.state;
    return (
      <div className="alert-rule-page">
        <div className="btn-wrap">
          <Button className="ok-btn" onClick={this.handleClick.bind(this)}>
            <img src="images/page/icon_add.png" alt="" />
            新增
          </Button>
        </div>
        <div className="charts-wrap">
          {
            title1 &&
            <div className="chart-item">
              <div className="chart">
                <div className="title">{title1}预警模型</div>
                <div className="ant-chart">
                  <ChartOfFood data={chart1data} />
                </div>
              </div>
            </div>
          }
          {
            title2 &&
            <div className="chart-item">
              <div className="chart">
                <div className="title">{title2}预警模型</div>
                <div className="ant-chart">
                  <ChartOfFood data={chart2data} />
                </div>
              </div>
            </div>
          }
        </div>
        <div className="new-pagination-wrap">
          {
            totalCount > 0 ?
              <div>
                <div className="pre-btn" onClick={this.handlePre.bind(this)} />
                {this.renderFooter()}
                <div className="next-btn" onClick={this.handleNext.bind(this)} />
              </div>
              : ''
          }
        </div>
        <AddModal
          ref={(ref) => { this.modal = ref; }}
          init={this.handleReload.bind(this)}
        />
      </div>
    );
  }
}

export default AlertRulePage;
